<template>
  <div id="operation" style="position: relative;">
    <a-spin :spinning="spinning">
    <div class="form-btn">
      <!-- 如果是撤回和审核驳回，必须点击重新编辑才可以保存和重新提交 -->
      <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(orderStatus) || (['chehui', 'no'].includes(orderStatus) && isEdit)" @click="handleSubmit(1)">保存</a-button>
      <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(orderStatus)" @click="handleSubmit(2)">提交</a-button>
      <a-button class="btn" type="primary" v-if="alias === 'edit' && isEdit" @click="handleSubmit(2)">重新提交</a-button>
      <a-button class="btn" type="primary" v-if="alias === 'aduit' && ['dsh'].includes(orderStatus)" @click="visible = true">审核</a-button>
      <!-- <a-button class="btn" type="primary" v-if="alias !== 'aduit' && ['dsh'].includes(orderStatus)" @click="handleCancel(form)">撤回</a-button> -->
      <a-button class="btn" type="primary" v-if="alias === 'edit' && ['chehui', 'no'].includes(orderStatus) && !isEdit" @click="isEdit = true">重新编辑</a-button>
      <!-- <a-button class="btn" type="primary" v-if="['ok'].includes(orderStatus)" @click="handlePush(form)">推送NC</a-button> -->
      <a-button class="btn" type="primary" @click="visiblePrinting = true" v-if="['ok','dsh'].includes(orderStatus)">打印</a-button>
      <!--  -->
    </div>
    <div class="wrap">
      <div id="printJS-form">
        <div class="printJS-item" v-if="orderStatus =='yszf'">
          <div class="infoTitle">验收作废说明</div>
          <div class="yszf_wrap">
            <div style="width:30%">操作人:{{form.cancelPeople}}</div>
            <div>作废时间:{{form.yszfTime}}</div>
            <div style="width:100%">作废原因:{{form.cancelReason}}</div>
          </div>
        </div>
        <div class="printJS-item" v-if="reCheckStepList.length>0 && orderStatus !='dtj'">
          <div class="infoTitle">验收单进度</div>
          <div class="stepWrap">
            <div class="step-left">
              <a-steps :current="currentIndex" size="small" :status="shState=='no'?'error':'process'">
                <a-step>
                  <template slot="title">{{ysState=='ok'?'验收成功':'正在验收'}}</template>
                  <div slot="description">验收人：{{ysList[0].checkMember}}</div>
                  <div slot="description" v-if="ysState=='ok'">完成时间：{{ysList[0].checkTime}}</div>
                </a-step>
                <a-step>
                  <template slot="title">{{reState=='ok'?'复验完成':reState=='un'?'等待复验':'复验不过'}}</template>
                  <div slot="description" >复验人：{{reRen.join(',')}}</div>
                  <div slot="description" v-if="reState=='ok'">完成时间：{{reTime}}</div>
                </a-step>
                <a-step>
                  <template slot="title">{{shState == 'ok'?'审核通过':shState == 'no'?'审核不过':'待审核'}}</template>
                  <div slot="description" >审核人：{{shList[0].checkMember}}</div>
                  <div slot="description" v-if="shList[0].checkStatus !='un'">审核时间：{{shList[0].checkTime}}</div>
                </a-step>
              </a-steps>
              <!-- <a-steps :current="reList.length==0?0:shList.length==0?1:2" size="small" :status="shList.length!=0 && shState=='no'?'error':'process'">
                <a-step>
                  <template slot="title">{{reList.length==0?'正在验收':'验收完成'}}</template>
                  <div slot="description">验收人：{{ysList.join(',')}}</div>
                  <div slot="description">完成时间：{{ysTime}}</div>
                </a-step>
                <a-step>
                  <template slot="title">{{shList.length==0?'等待复验':'复验完成'}}</template>
                  <div slot="description" v-if="reList.length>0" >复验人：{{reList.join(',')}}</div>
                  <div slot="description" v-if="reList.length>0" >完成时间：{{reTime}}</div>
                </a-step>
                <a-step>
                  <template slot="title">{{shList.length !=0 && shState=='ok'?'审核通过':shList.length !=0 && shState=='no'?'审核驳回': shList.length !=0 && shState=='un'?'正在审核':'等待审核'}}</template>
                  <div slot="description" v-if="shList.length>0">审核人：{{shList.join(',')}}</div>
                  <div slot="description" v-if="shList.length>0 && shState !='un'">审核时间：{{shTime}}</div>
                </a-step>
              </a-steps> -->
            </div>
            <div class="step-right" v-if="shList[0].checkStatus !='un'">审核备注：{{shList[0].detailDesc}}</div>
          </div>
        </div>
        <div class="printJS-item">
          <a-form-model ref="form" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
            <div class="infoTitle">基础信息</div>
            <div class="form-row">
                <a-form-model-item label="项目名称" class="form-col">
                  <a-input
                    v-model="form.projectName"
                    disabled
                    placeholder="请输入项目名称"
                  />
                </a-form-model-item>
                <a-form-model-item label="采购订单" class="form-col">
                  <a-input
                    v-model="form.orderSn"
                    disabled
                    placeholder="请输入订单流水号"
                  />
                </a-form-model-item>
                <a-form-model-item label="采购员" class="form-col">
                  <a-input
                    v-model="form.makePeople"
                    disabled
                    placeholder="请输入验收编号"
                  />
                </a-form-model-item>
                <a-form-model-item label="供应商" class="form-col">
                  <a-input
                    v-model="form.supplierName"
                    disabled
                    placeholder="请输入供应商"
                  />
                </a-form-model-item>
                <a-form-model-item label="验收编号" class="form-col">
                  <a-input
                    v-model="form.checkSn"
                    disabled
                    placeholder="请输入验收编号"
                  />
                </a-form-model-item>
                <a-form-model-item label="发货单号" class="form-col">
                  <a-input
                    v-model="form.deliverySn"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="送货人" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.deliveryPeople"
                    disabled
                    placeholder="请输入送货人"
                  />
                </a-form-model-item>
                <a-form-model-item label="送货人电话" class="form-col" prop="contactPhone">
                  <a-input
                    v-model="form.contactPhone"
                    disabled
                    placeholder="请输入送货人电话"
                  />
                </a-form-model-item>
                <a-form-model-item label="车牌号" class="form-col" prop="carNum">
                  <a-input
                    v-model="form.carNum"
                    disabled
                    placeholder="请输入车牌号"
                  />
                </a-form-model-item>
                <a-form-model-item label="收货日期" class="form-col">
                  <a-input
                    v-model="form.deliveryDate"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="收货时间" class="form-col">
                  <a-input
                    v-model="form.deliveryStartEnd"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="验收人" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.checkPeople"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="请购部门" class="form-col">
                  <a-input
                    v-model="form.vdef3Name"
                    disabled
                    placeholder="请输入请购部门"
                  />
                </a-form-model-item>
                <!-- <a-form-model-item label="收货日期" class="form-col">
                  <a-input
                    v-model="form.deliveryDate"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="收货时间" class="form-col">
                  <a-input
                    v-model="form.deliveryStartEnd"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="验收人" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.checkPeople"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item> -->
                <!-- <a-form-model-item label="验收时间" class="form-col" prop="deliveryTime">
                  <a-date-picker
                    v-model="form.checkTime"
                    placeholder="请选择验收时间"
                    disabled
                    valueFormat="YYYY-MM-DD"
                  />
                </a-form-model-item> -->
                <!-- <a-form-model-item label="验收人" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.checkPeople"
                    disabled
                    placeholder="请输入验收人"
                  />
                </a-form-model-item>
                <a-form-model-item label="制单人" class="form-col">
                  <a-input
                    v-model="form.makePeople"
                    disabled
                    placeholder="请输入制单人"
                  />
                </a-form-model-item> -->

                <!-- <a-form-model-item label="材质书号" class="form-col" prop="texture">
                  <a-input
                    v-model="form.texture"
                    disabled
                    placeholder="请输入材质书号"
                  />
                </a-form-model-item> -->
                <!-- <a-form-model-item label="使用部位" class="form-col" prop="contactPhone">
                  <a-input
                    v-model="form.unit"
                    disabled
                    placeholder="请输入使用部位"
                  />
                </a-form-model-item> -->
                <!-- <a-form-model-item label="是否满足合同要求" class="form-col" prop="contactPhone">
                  <a-input
                    v-model="form.isContract"
                    disabled
                    placeholder="请输入是否满足合同要求"
                  />
                </a-form-model-item> -->
                <!-- <a-form-model-item label="验收过程" class="form-col" style="width: 100%" :labelCol="{span: 4}" :wrapperCol="{span: 19}">
                  <a-textarea
                    v-model="form.checkProcess"
                    disabled
                    placeholder="验收过程"
                    :auto-size="{ minRows: 3}"
                  />
                </a-form-model-item> -->
            </div>
          </a-form-model>
        </div>
        <div class="printJS-item">
          <div class="infoTitle">物资验收</div>
          <div class="tableWrap">
            <DataTable rowKey="checkDetailId" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" />
          </div>
        </div>
        <div class="printJS-item">
          <div class="infoTitle">我方磅单数据</div>
          <div class="table-wrap">
            <div class="table-item">
              <div class="item-label">编号</div>
              <div class="item-right">{{(ourWeight && ourWeight.weightSerial)?ourWeight.weightSerial:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">车牌号</div>
              <div class="item-right">{{(ourWeight && ourWeight.carNum)?ourWeight.carNum:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">司称员</div>
              <div class="item-right">{{(ourWeight && ourWeight.driverName)?ourWeight.driverName:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">日期</div>
              <div class="item-right">{{(ourWeight && ourWeight.dataTime)?ourWeight.dataTime:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">入场时间</div>
              <div class="item-right">{{(ourWeight && ourWeight.inTime)?ourWeight.inTime:'--'}}</div>
            </div>
            <div class="table-item">
              <div class="item-label">出场时间</div>
              <div class="item-right">{{(ourWeight && ourWeight.outTime)?ourWeight.outTime:'--'}}</div>
            </div>

            <!-- <div class="table-item">
              <div class="item-label">客户代号</div>
              <div class="item-right">{{(ourWeight && ourWeight.clientCode)?ourWeight.clientCode:'--'}}</div>
            </div> -->
            <div class="table-item">
              <div class="item-label">总重</div>
              <div class="item-right">{{(ourWeight && ourWeight.totalWeight)?ourWeight.totalWeight:'--'}} kg</div>
            </div>
            <div class="table-item">
              <div class="item-label">空重</div>
              <div class="item-right">{{(ourWeight && ourWeight.emptyWeight)?ourWeight.emptyWeight:'--'}} kg</div>
            </div>
            <div class="table-item">
              <div class="item-label">净重</div>
              <div class="item-right">{{(ourWeight && ourWeight.netWeight)?ourWeight.netWeight:'--'}} kg</div>
            </div>
            <!-- <div class="table-item">
              <div class="item-label">料号（收费）</div>
              <div class="item-right">{{(ourWeight && ourWeight.materialNum)?ourWeight.materialNum:'--'}}</div>
            </div> -->
            <div class="table-item">
              <div class="item-label">方数</div>
              <div class="item-right">{{(ourWeight && ourWeight.cubicNumber)?ourWeight.cubicNumber:'--'}} m³</div>
            </div>
            <div class="table-item" style="width:calc(100% - 33.33%)">
              <div class="item-label">关联发货单号</div>
              <div class="item-right">{{form.deliverySn}}</div>
            </div>
          </div>
          <div class="flex imgWrap">
            <div class="" style="" >
              <span class="label">车头照片：</span>
              <img class="img-item" :src="ourWeight.pic1?ourWeight.pic1:require('@/assets/images/noImg.png')" @click="ourWeight.pic1?showImg(0):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">车尾照片：</span>
              <img class="img-item" :src="ourWeight.pic2?ourWeight.pic2:require('@/assets/images/noImg.png')" @click="ourWeight.pic2?showImg(1):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">车厢照片：</span>
              <img class="img-item" :src="ourWeight.pic3?ourWeight.pic3:require('@/assets/images/noImg.png')" @click="ourWeight.pic3?showImg(2):''" />
            </div>
            <div class="" style="margin:0 20px 20px 0;">
              <span class="label">空车照片：</span>
              <img class="img-item" :src="ourWeight.pic4?ourWeight.pic4:require('@/assets/images/noImg.png')" @click="ourWeight.pic4?showImg(3):''" />
            </div>
          </div>
        </div>
        <div class="printJS-item" v-if="!filedChecking">
          <div class="infoTitle">磅单差异对比</div>
          <div class="table-wrap" style="margin-bottom:10px;">
              <div class="table-item">
                <div class="item-label">供方净重</div>
                <div class="item-right">{{(tableListData[0] && tableListData[0].netWeight)?tableListData[0].netWeight:'--'}} kg</div>
              </div>
              <div class="table-item">
                <div class="item-label">车牌号</div>
                <div class="item-right">{{(tableListData[0] && tableListData[0].carNum)?tableListData[0].carNum:'--'}}</div>
              </div>
              <div class="table-item">
                <div class="item-label">司机姓名</div>
                <div class="item-right">{{(tableListData[0] && tableListData[0].driverName)?tableListData[0].driverName:'--'}}</div>
              </div>
              <div class="table-item">
                <div class="item-label">司机电话</div>
                <div class="item-right">{{(tableListData[0] && tableListData[0].driverPhone)?tableListData[0].driverPhone:'--'}}</div>
              </div>
              <div class="table-item" style="width:calc(100% - 33.33%)">
                <div class="item-label">差异比例</div>
                <div class="item-right" style="color:#333;font-size:24px;font-weight: bold;">{{tableListData[0] ? tableListData[0].dif : 0}}%</div>
              </div>
          </div>
        </div>
        <div class="printJS-item" v-if="!filedChecking">
          <div class="infoTitle">整体验收抽查</div>
          <div class="ysccWrap">
            <div class="ysqk-item" >
              <span class="label">抽查情况：</span>
              <div class="ysqk-text">{{form.checkDesc}}</div>
            </div>
            <div class="ysqk-img">
              <div class="ysqk-img-l">
                <span class="label">图片验收：</span>
                <div>
                  <template v-for="(item,index) in onSitetList">
                    <img class="img-item" :key="item" :src="item" @click="showImg2(index,onSitetList)" />
                  </template>
                  <img class="img-item" :src="require('@/assets/images/noImg.png')" v-if="onSitetList.length==0"/>
                </div>
              </div>
            </div>
            <div class="ysqk-img">
              <div  class="ysqk-img-r">
                <span class="label">视频验收：</span>
                <div>
                  <template v-for="item in form.checkFileVideo" v-if="form.checkFileVideo.length>0">
                    <video width="330" height="220" :src="item.url" controls style="margin-right:10px"></video>
                  </template>
                  <img class="img-item" :src="require('@/assets/images/noImg.png')" v-if="form.checkFileVideo.length==0" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="printJS-item" v-if="!filedChecking">
          <div class="infoTitle">单据照片</div>
          <div class="pic-wrap">
            <div class="" style="width:100%;" >
              <span class="label">供方/我方磅单照片：</span>
              <div style="display: flex;flex-wrap: wrap;">
                <template v-for="(item, index) in poundList" v-key="index" >
                  <img class="img-item" :key="index" :src="item" @click="showImg2(index,poundList)"/>
                </template>
                <img class="img-item" :src="require('@/assets/images/noImg.png')" v-if="poundList.length==0"/>
              </div>
            </div>
            <div style="width:100%;">
              <span class="label">供方纸质发货单照片：</span>
              <div style="display: flex;flex-wrap: wrap;">
                <template v-for="(item,index) in checkFileFour">
                  <img class="img-item" :key="item" :src="item" @click="showImg2(index,checkFileFour)" />
                </template>
                <img class="img-item" :src="require('@/assets/images/noImg.png')" v-if="checkFileFour.length==0"/>
              </div>
            </div>
            <!-- <div class="" style="width:50%;margin-bottom: 20px;">
              <span class="label">现场照片：</span>
              <template v-for="item in onSitetList">
                <img class="img-item" :key="item" :src="item" @click="handlePreView(item)" />
              </template>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <CommonDialog
      :rows="rows"
      :form="dialogForm"
      title="审核"
      :visible="visible"
      @hideDialog="hideVisible"
      @confirm="confirmHandle()"
    />
    <CommonDialog
      width="600px"
      :showButton="false"
      :visible="preVisible"
      @hideDialog="preVisible = false"
    >
      <template #detail>
        <img :src="previewUrl" style="width: 100%">
      </template>
    </CommonDialog>

    <a-modal v-model="visiblePrinting" width="80%" :centered="true" :closable="false" :footer="null">
      <div class="printModalWrap" id="printModalWrap">
        <div class="print-title">{{form.orgName}}（收料单）</div>
        <div class="print-middle">
          <div class="middle-left">
            <div class="middle-left-item" v-if="form.projectName">项目名称：{{form.projectName}}</div>
            <div class="middle-left-item" v-if="form.vdef3Name">请购部门：{{form.vdef3Name}}</div>
            <div class="middle-left-item">采购订单号：{{form.orderSn}}</div>
            <div class="middle-left-item">供应商：{{form.supplierName}}</div>
            <div class="middle-left-item">发货单号：{{form.deliverySn}}</div>
            <div class="middle-left-item">验收编号：{{form.checkSn}}</div>
            <div class="middle-left-item"></div>
            <div class="middle-left-item">送货车牌号：{{form.carNum}}</div>
            <div class="middle-left-item">送货人：{{form.deliveryPeople}}</div>
            <div class="middle-left-item">送货人电话：{{form.contactPhone}}</div>
            <div class="middle-left-item">发票抬头：{{form.orgName}}</div>
            <div class="middle-left-item">收货日期：{{form.deliveryDate}}</div>
            <div class="middle-left-item">收货时间：{{form.deliveryStartEnd}}</div>
          </div>
          <div class="middle-right">
            <img src="@/assets/images/v2_qscws7.png" alt="" class="logo-img" />
            <img :src="form.qrCode" alt="" class="logo-img" />
          </div>
        </div>
        <div class="print-table">
          <!-- :expand="true" :defaultExpandAllRows="true"  -->
          <DataTable rowKey="checkDetailId" align="center" :expand="true" :defaultExpandAllRows="true" :border="true" :showConfig="false" :tableData="printTableData" :tableColumn="printTableColumn">
            <div slot="expand" slot-scope="record">抽查描述：{{record.data.checkMemo?record.data.checkMemo:'--'}}</div>
          </DataTable>
          <div class="print-table-bottom">
            <div class="table-bottom-left">
              <div style="margin-right: 20px;">验收人：{{form.checkPeople}}</div>
              <div>请购使用部门：
                <template v-for="item in form.reCheckPeopleName">
                  <span style="padding-right:20px">{{item}}</span>
                </template>
                <!-- <span style="padding-right:20px">{{form.vdef3Name}}</span> -->
              </div>
            </div>
            <div class="table-bottom-right">
              <div>审核人：{{form.auditName}}</div>
              <div>送货人签字</div>
            </div>
          </div>
          <div class="paperInvoice">
            <div class="paper-label">供方纸质发货单：</div>
            <template v-for="item in checkFileFour">
              <img class="img-item" :key="item" :src="item" @click="showImg2(index,checkFileFour)" />
            </template>
          </div>
        </div>
      </div>
      <div class="print-bottom">
        <a-button type="primary" @click="handlePrint" style="margin-right: 20px;">打印</a-button>
        <a-button type="dashed" @click="visiblePrinting = false">取消</a-button>
      </div>
    </a-modal>
    </a-spin>
  </div>

</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import print from 'print-js'

// let remarkVali = (rule: any, value: any, callback: any) => {
//   console.log(this);
// }
@Component
export default class operation extends Vue {
  isHttp:boolean = true
  spinning:boolean= false
  form: any = {};
  Data: any[] = [];
  pic_index:any = 0
  previewUrl:any = ''
  visiblePrinting:boolean = false
  tableListData:any[] = []
  myTableListData:any[] = []
  printTableData:any[] = []
  filedChecking:any=0
  preVisible2:boolean = false
  currentIndex:any = 0
  get tableColumn () {
    return {
      materialsNum: {
        label: '物料编码',
        width: 120
      },
      materialsName: {
        label: '物料名称',
        width: 120
      },
      vdef1: {
        label: '存货备注',
        width: 100
      },
      unit: {
        label: '单位',
        width: 150
      },
      remark: {
        label: '发货备注',
        width: 150
      },
      orderNum: {
        label: '采购数量',
        width: 150
      },
      sendOutNum: {
        label: '发货数量',
        width: 150
      },
      checkNum: {
        label: '验收数量',
        type: this.isInput ? 'input' : 'null',
        callback: this.handleChangeNum,
        width: 150
      },
      checkMemo: {
        label: '抽查描述',
        width: 170
      },
      taxFreePrice: {
        label: '无税单价',
        type: this.isInput ? 'input' : 'null',
        callback: this.handleChangewsdj,
        width: 150
      },
      taxRate: {
        label: '税率',
        type: this.isInput ? 'input' : 'null',
        callback: this.handleChangehslv,
        width: 150
      },

      // norigMny: {
      //   label: '无税金额',
      //   width: 150
      // },
      // taxesPrice: {
      //   label: '税金',
      //   width: 150
      // },
      checkQualityTitle: {
        label: '质量评级',
        width: 150
      },
      nqtorigTaxPrice: {
        label: '含税单价',
        type: this.isInput ? 'input' : 'null',
        callback: this.handleChangehsdj,
        width: 150
      },
      taxInclusiveAmount: {
        label: '价税合计',
        width: 150
      }

    }
  }
  get tableList () {
    return {
      netWeight: {
        label: '净重',
        width: 150
      },
      carNum: {
        label: '车牌号',
        width: 150
      },
      driverName: {
        label: '司机姓名',
        width: 150
      },
      driverPhone: {
        label: '司机电话',
        width: 150
      }
    }
  }
  get myTableList () {
    return {
      sequenceNumber: {
        label: '编号',
        width: 120
      },
      dataTime: {
        label: '日期',
        width: 120
      },
      inTime: {
        label: '入场时间',
        width: 150
      },
      outTime: {
        label: '出场时间',
        width: 150
      },
      carNum: {
        label: '车号',
        width: 150
      },
      clientCode: {
        label: '客户代号',
        width: 150
      },
      totalWeight: {
        label: '总重',
        width: 150
      },
      emptyWeight: {
        label: '空重',
        width: 150
      },
      netWeight: {
        label: '净重',
        width: 150
      },
      materialNum: {
        label: '料号收费',
        width: 150
      }
    }
  }
  get printTableColumn () {
    return {
      materialsName: {
        label: '物料名称',
        width: 150
      },
      vdef1: {
        label: '存货备注',
        width: 150
      },
      unit: {
        label: '单位',
        width: 140
      },
      storageNumber: {
        label: '可入库数量',
        width: 150
      },
      sendOutNum: {
        label: '发货数量',
        width: 140
      },
      checkNum: {
        label: '实收数量',
        width: 150
      },
      checkQualityTitle: {
        label: '质量等级',
        width: 150
      }
      // checkMemo: {
      //   label: '抽查描述',
      //   width: 150
      // }
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  visible: boolean = false // 审核弹窗

  // dialog
  dialogForm: any = {
    checkStatus: 1,
    checkRemark: ''
  }
  get rows () {
    return {
      checkStatus: {
        label: '审核状态',
        el: 'radio',
        option: [
          {
            label: '同意',
            value: true
          },
          {
            label: '驳回',
            value: false
          }
        ],
        rules: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      checkRemark: {
        el: 'textarea',
        label: '备注',
        placeholder: '请输入备注',
        rules: [
            { validator: this.remarkVali, trigger: 'blur' }
        ]
      }
    }
  }
  reCheckStepList:any[] = []
  reRen:any[] = []
  ysList:any[] = []
  ysState:any = ''
  reList:any[] = []
  reTime:any = ''
  ysTime:any = ''
  shList:any[] = []
  reState:any = 'no'
  shState:any = 'no'
  shTime:any = ''
  shRemarks:any = ''
  id: string = ''
  tableType: string = 'add'
  activeIndex: number = 0 // 当前编辑的行
  preVisible: boolean = false
  defaultList: any[] = []
  onSitetList: any[] = []
  checkFileFour:any[] = []
  poundList: any[] = []
  alias: string = '' // 当前页面状态
  orderStatus: string = 'dtj'
  isEdit: boolean = false // 重新编辑
  approveData: any[] = [] // 审核信息
  ourWeight:any = '' // 榜单数据
  // 是否可编辑
  get isInput () {
    return (['edit'].includes(this.alias) && ['dtj', 'no'].includes(this.orderStatus)) || this.isEdit
  }
  init () {
    const {_alias: alias, checkId: id} = this.$route.query
    this.id = id as string
    this.alias = alias as string
    this.getDetail()
  }
  showImg (index:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: [this.ourWeight.pic1, this.ourWeight.pic2, this.ourWeight.pic3, this.ourWeight.pic4]
    })
    // this.$hevueImgPreview({
    //   multiple: true,
    //   nowImgIndex: index,
    //   imgList: [this.ourWeight.pic1, this.ourWeight.pic2, this.ourWeight.pic3, this.ourWeight.pic4]
    // })
  }
  showImg2 (index:any, arr:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: arr
    })
    // this.$hevueImgPreview({
    //   multiple: true,
    //   nowImgIndex: index,
    //   imgList: arr
    // })
  }
  handlePreView (url: string) {
    this.previewUrl = url
    this.preVisible = true
  }
  handlePreView2 (url: string, type:any) {
    this.previewUrl = url
    this.preVisible2 = true
    this.pic_index = type
  }

  getFileList () {
    this.$api.deliveryDeliveryFileFetch({ id: this.id }).then(({ data }: any) => {
      this.defaultList = data.map((item: any, index: number) => ({uid: index, url: item.fileUrl, name: item.fileId}))
    })
  }
  // 获取验收进度
  getReCheckStep (id:any) {
    this.$api.checkReCheckStepFetch({deliveryId: id}).then(res => {
      if (res.data.length > 0) {
        this.reCheckStepList = res.data
        res.data.map((kk:any) => {
          if (kk.settingType == 'ys') {
            this.ysList.push(kk)
          } else if (kk.settingType == 're') {
            this.reList.push(kk)
            this.reRen.push(kk.checkMember)
          } else if (kk.settingType == 'sh') {
            this.shList.push(kk)
          }
        })

        if (this.ysList[0].checkStatus == 'ok') {
          this.form.deliveryStartEnd = this.form.deliveryStartEnd + '-' + this.ysList[0].checkTime.substring(11, 16)
        }

        console.log(this.ysList, 'this.ysListthis.ysListthis.ysList')

        if (this.ysList.every((item:any) => item.checkStatus == 'ok')) { // 表示全部验收
          this.ysState = 'ok'
          this.currentIndex = 0
        } else if (this.ysList.some((item:any) => item.checkStatus == 'no')) { // 表示有一个没验收成功
          this.ysState = 'no'
        } else if (this.ysList.some((item:any) => item.checkStatus == 'un')) { // 表示有一个未验收
          this.ysState = 'un'
        }

        if (this.reList.every((item:any) => item.checkStatus == 'ok')) { // 表示全部复验
          this.reState = 'ok'
          this.currentIndex = 1
          this.reTime = this.reList[this.reList.length - 1].checkTime
        } else if (this.reList.some((item:any) => item.checkStatus == 'no')) { // 表示有一个复验没过
          this.reState = 'no'
          this.currentIndex = 1
        } else if (this.reList.some((item:any) => item.checkStatus == 'un')) { // 表示有一个没复验
          this.reState = 'un'
          this.currentIndex = 1
        }

        if (this.shList.every((item:any) => item.checkStatus == 'ok')) { // 表示全部审核
          this.shState = 'ok'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus == 'no')) { // 表示有一个审核没过
          this.shState = 'no'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus == 'un') && this.reState == 'ok') { // 表示有一个没审核
          this.shState = 'un'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus == 'un')) { // 表示有一个没审核
          this.shState = 'un'
        }

        // res.data.map((kk:any) => {
        //   if (kk.settingType == 'ys') {
        //     this.ysList.push(kk.checkMember)
        //     this.ysTime = kk.checkTime
        //   } else if (kk.settingType == 're') {
        //     this.reList.push(kk.checkMember)
        //     this.reTime = kk.checkTime
        //   } else if (kk.settingType == 'sh') {
        //     this.shList.push(kk.checkMember)
        //     this.shState = kk.checkStatus
        //     this.shRemarks = kk.detailDesc
        //     this.shTime = kk.checkTime
        //   }
        // })
      }
    }).catch()
  }

  getDetail () {
    this.$api.checkDetailFetch({id: this.id}).then(({ data }: any) => {
      this.getReCheckStep(data.deliveryId)
      data.isContract = data.isContract ? '是' : '否'
      this.orderStatus = data.status

      data.reCheckPeopleName = data.reCheckPeopleName ? data.reCheckPeopleName.split(',') : ''
      this.form = data // 基础信息
      this.ourWeight = (data.difWeight && data.difWeight.ourWeight) ? data.difWeight.ourWeight : '' // 榜单数据
      this.Data = data.checkDetails // 明细
      this.filedChecking = data.filedChecking

      data.checkDetails.map((item:any) => {
        if (item.checkQuality == '1') {
          item.checkQualityTitle = '好'
        } else if (item.checkQuality == '2') {
          item.checkQualityTitle = '中'
        } else {
          item.checkQualityTitle = '差'
        }
       item.storageNumber = Number(item.orderNum) - Number(item.checkedNum)
      })

      this.printTableData = data.checkDetails
      this.tableListData.push(data.difWeight)
      if (data.difWeight) {
        this.myTableListData.push(data.difWeight.ourWeight)
      }
      this.defaultList = data.checkFilesOne.filter((item: any) => item.checkFileType === 1).map((item: any) => item.url) // 原始单据
      this.onSitetList = data.checkFilesOne.filter((item: any) => item.checkFileType === 2).map((item: any) => item.url) // 现场照片
      this.poundList = data.checkFileThree.map((item: any) => item.url) // 磅单
      this.checkFileFour = data.checkFileFour.map((item: any) => item.url) // 供方纸质发货单
      // 审核信息
      let approveInfo = this.$enums.acceptanceList.approveInfo
      this.approveData = Object.keys(approveInfo).map((key: any) => ({label: approveInfo[key], value: (this.$enums.acceptanceList[key] || {})[data[key]] || data[key]}))
    })
  }
  handleSubmit (is_save: number) {
    // const flag = this.Data.every(item => item.taxFreePrice && item.taxRate)
    const flag = this.Data.every(item => item.taxFreePrice && item.taxRate >= 0)
    if (!flag) {
     return this.$message.error('请先表格中的无税单价和税率填写完整')
    }
    const data = {
      checkId: this.id,
      checkDetails: this.Data,
      is_save
    }
    this.$api.checkUpdateFetch(data).then(() => {
      this.$message.success(`${is_save === 1 ? '保存' : '编辑'}成功`)
      this.$router.back()
    })
  }
  @Confirm('', ({ checkSn }: any) => {
    return new Promise((resolve, reject) => {
      resolve({ content: `确定撤回[${checkSn}]验收单吗?`, width: 550 })
    })
  })
  handleCancel ({ checkId: id }: any) {
    this.$api.checkWithdrawPortFetch({ id, status: 'chehui' }).then(() => {
      this.$message.success('撤回成功')
      this.$router.back()
    })
  }
  @Confirm('', ({ checkSn }: any) => {
    return new Promise((resolve, reject) => {
      resolve({ content: `确定把[${checkSn}]的验收单推送NC吗?`, width: 550 })
    })
  })
  handlePush ({ checkId: id }: any) {
    this.$api.checkWithdrawPortFetch({ id, status: 'nc' }).then(() => {
      this.$message.success('推送成功')
      this.$router.back()
    })
  }
  // dialog确定
  confirmHandle () {
    let that = this
    let checkStatus = 1
    if (this.dialogForm.checkStatus) {
      checkStatus = 1
    } else {
      checkStatus = 0
    }
    const data = {
      checkStatus: checkStatus,
      checkRemark: this.dialogForm.checkRemark,
      id: this.id
    }
    this.spinning = true
    this.visible = false
    // this.isHttp = false
    // const hide = this.$message.loading('审核中...', 2);
    this.$api.checkAuditStatusFetch(data).then(() => {
      // this.$message.success('审核成功')
      // this.$message.loading('审核成功', 1)
      this.spinning = false
      this.$message.success('审核成功')
      setTimeout(() => {
        // that.isHttp = true
        that.$router.back()
      }, 1000)
    }).catch(() => {
      // that.isHttp = true
      this.spinning = false
    })
  }
  // 隐藏dialog
  hideVisible () {
    this.visible = false
  }
  changePage (val: number) {
    this.pageConfig.current = val;
  }
  getList () {
    let data = {
      id: this.id
    };
    this.$api.deliveryDeliveryDetailFetch(data).then((res: any) => {
      this.Data = res.data.records;
    });
  }
  handlePrint () {
    const style = `@page { margin: 20px; } .flex {display: flex} @media print{}
        .printModalWrap{
          width: 100%;
          min-height: 500px;
          border: 1px solid #8a8a8a;
        }
        .print-title{
            line-height: 44px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid #8a8a8a;
        }
        .print-middle{
          padding: 10px 15px;
          display: flex;
          border-bottom: 1px solid #8a8a8a;
        }
        .middle-left{
          width: calc(100% - 180px);
          display: flex;
          flex-wrap: wrap;
          font-size:8px;
        }
        .middle-left>div:nth-child(2n+1){
          width:55%;
        }
        .middle-left>div:nth-child(2n){
          width:45%;
        }
        .paperInvoice{
          display:flex;
        }
        .paper-label{
            font-size: 14px;
        }
        .paperInvoice>img{
          width: 150px;
          height: 150px;
        }
        .middle-left-item{
          line-height: 26px;
          padding-right: 10px;
        }
        .middle-right{
          width: 180px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .logo-img{
          width: 70px;
        }
        .print-table{
          padding: 10px 15px;
        }
        .print-table-bottom{
          line-height: 40px;
          display: flex;
          justify-content: space-between;
        }
        .table-bottom-left{
          display: flex;
        }
        .table-bottom-right{
          padding-right: 50px;
          display: flex;
        }
        .table-bottom-right>div{
          margin-left: 50px;
        }
      .form-row {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 200px;
      }
      .form-col {
        width: 48%;
        flex-shrink: 0;
      }
      .form-btn {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .btn {
        margin: 10px 10px 0 0;
      }
      .ant-input-number, .ant-calendar-picker {
        width: 100%;
      }
      .ant-pagination {
        display: none
      }
    .infoTitle {
      margin-bottom: 20px;
      font-weight: 800;
      color: #000;
    }
    .ant-input[disabled] {
      color: #000;
    }
    `
    print({
        printable: 'printModalWrap',
        type: 'html',
        documentTitle: '',
        css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.css', ''],
        style: style,
        scanStyles: false
    })
  }
  remarkVali (rule: any, value: string, callback: any) {
    if (!this.dialogForm.checkStatus && !value.trim().length) {
      return callback(new Error('请填写驳回原因'))
    }
    callback()
  }

  // 改变获取输入的验收数量
  handleChangeNum (val: any) {
    // 无税金额 = 无税单价 * 订单数量
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxInclusiveAmount = (Number(val.nqtorigTaxPrice) * Number(val.checkNum)).toFixed(2)

    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
  }
  // 改变无税单价
  handleChangewsdj (val: any) {
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
  }
  // 改变税率
  handleChangehslv (val:any) {
    val.taxFreePrice = (Number(val.nqtorigTaxPrice) / (1 + Number(val.taxRate) * 0.01)).toFixed(2);
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
  }
  // 改变含税单价的值  norigMny
  handleChangehsdj (val:any) {
    // 无税单价 = 含税单价 / （1+税率）
    val.taxFreePrice = (Number(val.nqtorigTaxPrice) / (1 + Number(val.taxRate) * 0.01)).toFixed(2);
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxInclusiveAmount = (Number(val.nqtorigTaxPrice) * Number(val.checkNum)).toFixed(2)
    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
    console.log(val, '我是含税单价')
}
}
</script>
<style lang='scss' scoped>
.form-btn {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  z-index:999999;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.wrap{
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form{
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap{
        padding:30px 24px;
        display: flex;
        flex-wrap: wrap;
        div{
          margin-bottom: 10px;
        }
      }
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
          .form-col {
            width: 25%;
            flex-shrink: 0;
          }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right{
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap{
        padding:0 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
  }
}
.printModalWrap{
  width: 100%;
  margin-bottom: 20px;
  // min-height: 500px;
  border: 1px solid #8a8a8a;
  .print-title{
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #8a8a8a;
  }
  .print-middle{
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #8a8a8a;
    .middle-left{
      width: calc(100% - 250px);
      display: flex;
      flex-wrap: wrap;
      .middle-left-item{
        width: 30%;
        line-height: 26px;
        padding-right: 10px;
      }
    }
    .middle-right{
      width: 250px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo-img{
        width: 80px;
      }
    }
  }
  .print-table{
    padding: 10px 15px;
    .print-table-bottom{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .table-bottom-left{
        display: flex;
      }
      .table-bottom-right{
        padding-right: 50px;
        display: flex;
        div{
          margin-left: 50px;
        }
      }
    }
    .paperInvoice{
      display:flex;
      flex-wrap: wrap;
      .paper-label{
        font-size: 14px;
      }
      img{
        width: 150px;
        height: 150px;
        margin-right: 10px;
      }
    }
  }
}
.print-bottom{
    display: flex;
    justify-content: center;
  }
.pic-wrap{
  display: flex;
  flex-wrap: wrap;
}
// .form-row {
//   display: flex;
//   flex-wrap: wrap;
//   .form-col {
//     width: 50%;
//     flex-shrink: 0;
//   }
// }
// .form-btn {
//   width: 100%;
//   display: flex;
//   justify-content: center;
//   .btn {
//     margin: 10px 10px 0 0;
//   }
// }
// .img-item {
//   width: 100px;
//   height: 100px;
//   margin: 0px 10px 10px 0;
// }
// .table-wrap{
//   border: 1px solid #d9d9d9;
//   width: 1000px;
//   display:flex;
//   flex-wrap: wrap;
//   margin-bottom: 20px;

//   .table-item{
//     width:50%;
//     display: flex;
//     align-items: center;
//     line-height: 50px;
//     border: 1px solid #d9d9d9;
//     .item-label{
//       padding: 0 8px;
//       width: 180px;
//       border-right: 1px solid #d9d9d9;
//       background: rgb(244, 244, 244);
//     }
//     .item-right{
//       padding: 0 8px;
//       width: calc(100% - 180px);
//     }
//   }
// }
.dif{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
/deep/ .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
    max-width: 300px !important;
    white-space: normal;
}
.dialog_bottom{
  cursor: pointer;
  margin-top: 10px;
  width:100%;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  div{
    display: flex;
    justify-content: center;
    align-items: center;

    .dialog_pic{
      width:48px;
      height:48px;
      margin-right: 10px;
    }
  }

}
</style>
